<template>
	<!-- <style-form v-model:value="formState" :configForm="configForm"></style-form> -->

	<a-form :ref="'ruleForm'" :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
		<a-collapse ghost>
			<a-collapse-panel key="1" header="标题配置" collapsible="header">
				<a-form-item key="title" label="标题内容" name="title">
					<a-row :gutter="[10, 10]">
						<a-col :span="24"><a-input v-model:value="formState.title" /></a-col>
						<a-col :span="12">
							<a-select v-model:value="formState.titleSize" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
									:value="optionItem"
									:key="optionItem"
									:label="optionItem + 'px'"
								>
									{{ optionItem + 'px' }}
								</a-select-option>
							</a-select>
						</a-col>
						<a-col :span="12">
							<color-picker
								v-model:value="formState.titleColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.titleWeight ? 'default' : 'primary'"
								@click="formState.titleWeight = !formState.titleWeight"
								>B</a-button
							>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-style: italic; font-weight: 600"
								:type="!formState.titleStyle ? 'default' : 'primary'"
								@click="formState.titleStyle = !formState.titleStyle"
								>I</a-button
							>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.titleLine ? 'default' : 'primary'"
								@click="formState.titleLine = !formState.titleLine"
								><span style="text-decoration: underline">U</span></a-button
							>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="title" label="标题图标" name="title">
					<a-row :gutter="[10, 10]">
						<a-col :span="12" class="h-[32px] leading-[29px]">
							<a-switch size="small" @click.stop.prevent v-model:checked="formState.titleIconShow" />
						</a-col>
						<template v-if="formState.titleIconShow">
							<a-col :span="12">
								<a-dropdown class="h-[32px] flex items-center justify-between w-[100%]">
									<a class="h-[100%] ant-dropdown-link w-[100%] flex items-center justify-between" @click.prevent>
										<span :class="['iconfont', formState.titleIcon]"></span>
										<DownOutlined />
									</a>
									<template #overlay>
										<div
											class="flex w-[300px] bg-[#fff] flex-wrap shadow-lg rounded-[5px] max-h-[300px] overflow-y-auto"
										>
											<div
												class="m-[15px] text-[20px]"
												v-for="item in iconList"
												:key="item"
												@click="formState.titleIcon = item"
											>
												<span :class="['iconfont', item]"></span>
											</div>
										</div>
									</template>
								</a-dropdown>
							</a-col>
							<a-col :span="12">
								<color-picker
									v-model:value="formState.titleIconColor"
									style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
								/>
							</a-col>
							<a-col :span="12">
								<a-select v-model:value="formState.titleIconSize" optionLabelProp="label">
									<a-select-option
										v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
										:value="optionItem"
										:key="optionItem"
										:label="optionItem + 'px'"
									>
										{{ optionItem + 'px' }}
									</a-select-option>
								</a-select>
							</a-col>
						</template>
					</a-row>
				</a-form-item>
			</a-collapse-panel>
			<a-collapse-panel key="2" header="内容配置" collapsible="header">
				<a-form-item key="mainContentKey" label="序号" name="mainContentKey">
					<a-row :gutter="[10, 10]">
						<a-col :span="12">
							<a-select v-model:value="formState.sortSize" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
									:value="optionItem"
									:key="optionItem"
									:label="optionItem + 'px'"
								>
									{{ optionItem + 'px' }}
								</a-select-option>
							</a-select>
						</a-col>
						<a-col :span="12">
							<color-picker
								v-model:value="formState.sortColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.sortWeight ? 'default' : 'primary'"
								@click="formState.sortWeight = !formState.sortWeight"
								>B</a-button
							>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-style: italic; font-weight: 600"
								:type="!formState.sortStyle ? 'default' : 'primary'"
								@click="formState.sortStyle = !formState.sortStyle"
								>I</a-button
							>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.sortLine ? 'default' : 'primary'"
								@click="formState.sortLine = !formState.sortLine"
								><span style="text-decoration: underline">U</span></a-button
							>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="mainContentKey" label="标题内容" name="mainContentKey">
					<a-row :gutter="[10, 10]">
						<a-col :span="12">
							<a-select v-model:value="formState.mainContentSize" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
									:value="optionItem"
									:key="optionItem"
									:label="optionItem + 'px'"
								>
									{{ optionItem + 'px' }}
								</a-select-option>
							</a-select>
						</a-col>
						<a-col :span="12">
							<color-picker
								v-model:value="formState.mainContentColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.mainContentWeight ? 'default' : 'primary'"
								@click="formState.mainContentWeight = !formState.mainContentWeight"
								>B</a-button
							>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-style: italic; font-weight: 600"
								:type="!formState.mainContentStyle ? 'default' : 'primary'"
								@click="formState.mainContentStyle = !formState.mainContentStyle"
								>I</a-button
							>
						</a-col>
						<a-col :span="8">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.mainContentLine ? 'default' : 'primary'"
								@click="formState.mainContentLine = !formState.mainContentLine"
								><span style="text-decoration: underline">U</span></a-button
							>
						</a-col>
						<a-col :span="24">
							<a-slider :tooltipOpen="false" v-model:value="formState.mainContentWSize" :max="100" :min="10" />
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="chart" label="占比图" name="chart">
					<a-row :gutter="[10, 10]">
						<a-col :span="12" class="h-[32px] leading-[29px]">
							<a-switch size="small" @click.stop.prevent v-model:checked="formState.chartShow" />
						</a-col>
						<template v-if="formState.chartShow">
							<a-col :span="12">
								<color-picker
									v-model:value="formState.chartColor"
									style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
								/>
							</a-col>
							<a-col :span="12"> 百分比 </a-col>
							<a-col :span="12" class="h-[32px] leading-[29px]">
								<a-switch size="small" @click.stop.prevent v-model:checked="formState.chartPercentShow" />
							</a-col>
						</template>
					</a-row>
				</a-form-item>
				<a-form-item key="subContent" label="数值" name="subContent">
					<a-row :gutter="[10, 10]">
						<a-col :span="12" class="h-[32px] leading-[29px]">
							<a-switch size="small" @click.stop.prevent v-model:checked="formState.subContentShow" />
						</a-col>
						<template v-if="formState.subContentShow">
							<a-col :span="12">
								<a-input v-model:value="formState.unitNum">
									<template #prefix> 单位 </template>
								</a-input>
							</a-col>
							<a-col :span="12">
								<a-select v-model:value="formState.subContentSize" optionLabelProp="label">
									<a-select-option
										v-for="optionItem in [8, 10, 12, 14, 15, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]"
										:value="optionItem"
										:key="optionItem"
										:label="optionItem + 'px'"
									>
										{{ optionItem + 'px' }}
									</a-select-option>
								</a-select>
							</a-col>
							<a-col :span="12">
								<color-picker
									v-model:value="formState.subContentColor"
									style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
								/>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-weight: 600"
									:type="!formState.subContentWeight ? 'default' : 'primary'"
									@click="formState.subContentWeight = !formState.subContentWeight"
									>B</a-button
								>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-style: italic; font-weight: 600"
									:type="!formState.subContentStyle ? 'default' : 'primary'"
									@click="formState.subContentStyle = !formState.subContentStyle"
									>I</a-button
								>
							</a-col>
							<a-col :span="8">
								<a-button
									style="width: 100%; font-weight: 600"
									:type="!formState.subContentLine ? 'default' : 'primary'"
									@click="formState.subContentLine = !formState.subContentLine"
									><span style="text-decoration: underline">U</span></a-button
								>
							</a-col>
						</template>
					</a-row>
				</a-form-item>
				<a-form-item key="line" label="分割线" name="line">
					<a-row :gutter="[10, 10]">
						<a-col :span="8">
							<a-select v-model:value="formState.lineStyle" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [
										{ label: '一', value: 'solid' },
										{ label: '- - -', value: 'dotted' },
										{ label: '· · ·', value: 'dashed' }
									]"
									:value="optionItem.value"
									:key="optionItem.value"
									:label="optionItem.label"
								>
									{{ optionItem.label }}
								</a-select-option>
							</a-select>
						</a-col>
						<a-col :span="8">
							<color-picker
								v-model:value="formState.lineColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="8">
							<a-select v-model:value="formState.lineWidth" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
									:value="optionItem"
									:key="optionItem"
									:label="optionItem + 'px'"
								>
									{{ optionItem + 'px' }}
								</a-select-option>
							</a-select>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="pagination" label="分页" name="pagination">
					<a-row :gutter="[10, 10]">
						<a-col :span="12" class="h-[32px] leading-[29px]">
							<a-switch size="small" @click.stop.prevent v-model:checked="formState.pagination" />
						</a-col>
						<a-col :span="12" v-if="formState.pagination">
							<a-select v-model:value="formState.pageSize" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [1, 2, 3, 4, 5, 10, 15, 20]"
									:value="optionItem"
									:key="optionItem"
									:label="optionItem"
								>
									{{ optionItem }}
								</a-select-option>
							</a-select>
						</a-col>
					</a-row>
				</a-form-item>
			</a-collapse-panel>
			<a-collapse-panel key="3" header="整体外观" collapsible="header">
				<a-form-item key="bg" label="背景" name="bg">
					<a-row :gutter="[10, 10]">
						<!-- <a-col :span="12">
							<a-dropdown class="h-[32px]">
								<a class="h-[100%] ant-dropdown-link w-[100%] flex items-center justify-between" @click.prevent>
									<span :class="['iconfont', formState.bgImg]"></span>
									<DownOutlined />
								</a>
								<template #overlay>
									<div class="flex w-[300px] bg-[#fff] flex-wrap shadow-lg rounded-[5px] max-h-[300px] overflow-y-auto">
										<div
											class="m-[15px] text-[20px]"
											v-for="item in iconList"
											:key="item"
											@click="formState.bgImg = item"
										>
											<span :class="['iconfont', item]"></span>
										</div>
									</div>
								</template>
							</a-dropdown>
						</a-col> -->
						<a-col :span="24">
							<color-picker
								v-model:value="formState.bgColor"
								v-model:gradientColor="formState.bgColor"
								useType="both"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
					</a-row>
				</a-form-item>

				<a-form-item key="border" label="边框" name="border">
					<a-row :gutter="[10, 10]">
						<a-col :span="8">
							<a-select v-model:value="formState.borderStyle" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [
										{ label: '一', value: 'solid' },
										{ label: '- - -', value: 'dotted' },
										{ label: '· · ·', value: 'dashed' }
									]"
									:value="optionItem.value"
									:key="optionItem.value"
									:label="optionItem.label"
								>
									{{ optionItem.label }}
								</a-select-option>
							</a-select>
						</a-col>
						<a-col :span="8">
							<color-picker
								v-model:value="formState.borderColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="8">
							<a-select v-model:value="formState.borderWidth" optionLabelProp="label">
								<a-select-option
									v-for="optionItem in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
									:value="optionItem"
									:key="optionItem"
									:label="optionItem + 'px'"
								>
									{{ optionItem + 'px' }}
								</a-select-option>
							</a-select>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="bgR" label="背景圆角" name="bgR">
					<a-row :gutter="[10, 10]">
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRTL" style="width: 100%">
								<template #prefix>
									<RadiusUpleftOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRTR" style="width: 100%">
								<template #prefix>
									<RadiusUprightOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="4">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.bgRLock ? 'default' : 'primary'"
								@click="formState.bgRLock = !formState.bgRLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.bgRLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRBL" style="width: 100%">
								<template #prefix>
									<RadiusBottomleftOutlined />
								</template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="bgRChange" v-model:value="formState.bgRBR" style="width: 100%">
								<template #prefix>
									<RadiusBottomrightOutlined />
								</template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item label="内边距">
					<a-row :gutter="[10, 10]">
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingT" style="width: 100%">
								<template #prefix> 上 </template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingB" style="width: 100%">
								<template #prefix> 下 </template>
							</a-input-number>
						</a-col>
						<a-col :span="4">
							<a-button
								style="width: 100%; font-weight: 600"
								:type="!formState.paddingLock ? 'default' : 'primary'"
								@click="formState.paddingLock = !formState.paddingLock"
							>
								<template #icon>
									<LockOutlined v-if="formState.paddingLock" />
									<UnlockOutlined v-else />
								</template>
							</a-button>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingL" style="width: 100%">
								<template #prefix> 左 </template>
							</a-input-number>
						</a-col>
						<a-col :span="10">
							<a-input-number :min="0" @change="paddingChange" v-model:value="formState.paddingR" style="width: 100%">
								<template #prefix> 右 </template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item key="shadow" label="阴影" name="shadow">
					<a-row :gutter="[10, 10]">
						<a-col :span="12">
							<a-input-number
								v-model:value="formState.shadowX"
								@change="() => formState.shadowX.replace(/[^0-9]/g, '')"
								style="width: 100%"
							>
								<template #prefix> X </template>
							</a-input-number>
						</a-col>
						<a-col :span="12">
							<a-input-number v-model:value="formState.shadowY" style="width: 100%">
								<template #prefix> Y </template>
							</a-input-number>
						</a-col>
						<a-col :span="12">
							<color-picker
								v-model:value="formState.shadowColor"
								style="height: 32px; overflow: hidden; border: 1px solid #d9d9d9"
							/>
						</a-col>
						<a-col :span="12">
							<a-input-number v-model:value="formState.shadowDegree" style="width: 100%">
								<template #prefix> 模糊 </template>
							</a-input-number>
						</a-col>
					</a-row>
				</a-form-item>
			</a-collapse-panel>
		</a-collapse>
	</a-form>
</template>
<script setup>
	import config from '../config'
	import { reactive, defineProps, defineEmits, h } from 'vue'
	import { DisconnectOutlined } from '@ant-design/icons-vue'
	import iconFont from '../../../public/iconFont'
	const iconList = ref(iconFont)

	const typeIconList = ref([
		{ bgColor: '#e6f4ff', borderColor: '#91caff', color: '#0958d9' },
		{ bgColor: '#f6ffed', borderColor: '#b7eb8f', color: '#389e0d' },
		{ bgColor: '#fff7e6', borderColor: '#ffd591', color: '#d46b08' },
		{ bgColor: '#f9f0ff', borderColor: '#d3adf7', color: '#531dab' }
	])
	const emits = defineEmits(['upDataConfig'])
	const props = defineProps({
		config: {
			type: Object,
			default: () => {
				return config
			}
		}
	})
	const formState = reactive({
		...props.config.style
	})
	// 更新组件内容
	watch(
		() => formState,
		(newVal) => {
			emits('upDataConfig', { ...props.config, style: newVal })
		},
		{
			deep: true
		}
	)
	const iconRChange = (e) => {
		if (formState.iconRLock) {
			formState.iconRTL = e
			formState.iconRTR = e
			formState.iconRBL = e
			formState.iconRBR = e
		}
	}
	const bgRChange = (e) => {
		if (formState.bgRLock) {
			formState.bgRTL = e
			formState.bgRTR = e
			formState.bgRBL = e
			formState.bgRBR = e
		}
	}
	const paddingChange = (e) => {
		if (formState.paddingLock) {
			formState.paddingT = e
			formState.paddingR = e
			formState.paddingB = e
			formState.paddingL = e
		}
	}
</script>
<style lang="less" scoped>
	:deep(.vc-color-wrap) {
		height: 100%;
		line-height: 32px !important;
	}
	:deep(.ant-collapse-header) {
		display: flex;
		align-items: center !important;
	}
	.ant-dropdown-link {
		border: 1px solid #d9d9d9;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 5px;
	}
	:deep(.ant-dropdown-link) {
		border: 1px solid #d9d9d9;
		padding: 0px 5px;
	}
	:deep(.ant-radio-button-wrapper) {
		padding: 0px;
		width: 100%;
	}
	:deep(.ant-radio-group) {
		display: flex;
		text-align: center;
	}
</style>
